<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YiMo - Mock服务管理平台</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="lib/element-ui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f7fa;
        }

        .app-container {
            min-height: 100vh;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            margin: 0;
            font-size: 20px;
            font-weight: 300;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .github-link {
            display: flex;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.15);
            border: 1px solid transparent;
            padding: 6px 12px;
            border-radius: 6px;
            color: white;
            text-decoration: none;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.2s;
        }

        .github-link:hover {
            background-color: rgba(255, 255, 255, 0.25);
        }

        .github-icon {
            width: 16px;
            height: 16px;
            margin-right: 6px;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'/%3e%3c/svg%3e");
            background-size: contain;
            background-repeat: no-repeat;
        }

        .main-content {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            margin-bottom: 20px;
        }

        .card-header {
            padding: 20px;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-body {
            padding: 20px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            text-align: center;
        }

        .stat-number {
            font-size: 32px;
            font-weight: bold;
            color: #409eff;
            margin-bottom: 8px;
        }

        .stat-label {
            color: #606266;
            font-size: 14px;
        }

        .api-item {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            margin-bottom: 10px;
            transition: all 0.3s;
        }

        .api-item:hover {
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .api-header {
            padding: 15px;
            background: #fafafa;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .api-method {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            color: white;
        }

        .method-get { background-color: #67c23a; }
        .method-post { background-color: #409eff; }
        .method-put { background-color: #e6a23c; }
        .method-delete { background-color: #f56c6c; }

        .api-url {
            font-family: 'Courier New', monospace;
            color: #606266;
        }

        .api-status {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .status-badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
        }

        .status-active { background-color: #67c23a; }
        .status-inactive { background-color: #909399; }

        .group-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            border-bottom: 1px solid #ebeef5;
            transition: background-color 0.2s;
            cursor: pointer;
        }

        .group-item:hover:not(.selected) {
            background-color: #f5f7fa;
        }

        .group-item.selected {
            background-color: #d9ecff;
            border-left: 4px solid #409eff;
            padding-left: 11px; /* Adjust padding to account for border */
        }

        .group-list-container {
            max-height: 400px; /* 设置固定最大高度，确保能够滚动 */
            overflow-y: auto;
            padding: 5px; /* Optional: for better spacing */
        }

        .group-header {
            padding: 15px;
            background: #fafafa;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .group-name {
            font-weight: bold;
            color: #303133;
            margin-right: 10px;
        }

        .group-url {
            font-family: 'Courier New', monospace;
            color: #606266;
        }

        .group-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #909399;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #909399;
        }

        .empty-state i {
            font-size: 48px;
            margin-bottom: 20px;
            opacity: 0.5;
        }

        .toolbar {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .search-box {
            flex: 1;
            max-width: 300px;
        }

        .filter-group {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .pagination-container {
            text-align: center;
            margin-top: 20px;
        }

        .template-example {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            color: #495057;
        }

        .response-preview {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin-top: 10px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            color: #495057;
            max-height: 200px;
            overflow-y: auto;
        }

        /* 响应对话框样式 */
        .response-dialog .el-dialog__body {
            height: 70vh; /* 固定高度 */
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        
        .response-dialog .response-info {
            flex-shrink: 0; /* 信息区域不缩放 */
        }
        
        .response-dialog .response-content {
            flex: 1; /* 内容区域占用剩余空间 */
            min-height: 0;
        }

        .response-dialog pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            line-height: 1.4;
        }

        .response-dialog h4 {
            margin: 15px 0 10px 0;
            color: #303133;
            font-size: 14px;
        }

        .response-dialog p {
            margin: 5px 0;
            color: #606266;
        }

        .response-dialog strong {
            color: #303133;
        }

        .response-info {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 15px;
        }

        .response-info h4 {
            margin: 0 0 10px 0;
            color: #303133;
            font-size: 14px;
        }

        .response-info p {
            margin: 5px 0;
            color: #606266;
            font-size: 12px;
        }

        .response-content {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            height: 400px; /* 固定高度，确保有滚动条 */
        }

        .response-content pre {
            margin: 0;
            background: transparent;
            flex: 1;
            overflow-y: auto;
            min-height: 0; /* 防止flex子元素撑开父容器 */
            padding: 0;
            border: none;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            line-height: 1.4;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        
        /* 流式内容滚动条样式 */
        .response-content::-webkit-scrollbar,
        .response-content pre::-webkit-scrollbar {
            width: 6px;
        }
        
        .response-content::-webkit-scrollbar-track,
        .response-content pre::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        
        .response-content::-webkit-scrollbar-thumb,
        .response-content pre::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        
        .response-content::-webkit-scrollbar-thumb:hover,
        .response-content pre::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }

        .hljs {
            background: transparent !important;
            padding: 0 !important;
        }
        
        /* 备用代码样式 */
        pre {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 10px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            line-height: 1.4;
            overflow-x: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .group-select-popper {
            max-height: 200px;
        }

        .group-select-popper .el-scrollbar__wrap {
            max-height: 200px;
        }

        .group-select-popper .el-scrollbar__view {
            /* Add any specific styles for the view if needed */
        }
        [v-cloak] {
            display: none;
        }

        .content-area {
            min-height: 300px;
            transition: background-color 0.3s ease;
        }
        
        /* 强制对话框垂直居中 */
        .el-dialog__wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .el-dialog {
            margin: 0 !important;
        }

        /* 简洁表单样式 */
        .api-form-dialog .el-form-item {
            margin-bottom: 18px;
        }
        
        .api-form-dialog .el-form-item__label {
            font-size: 13px;
            color: #606266;
        }
        
        .api-form-dialog .template-example {
            background: #f5f7fa;
            border-radius: 4px;
            padding: 8px 12px;
            margin-top: 6px;
            font-size: 12px;
            color: #909399;
        }

        /* 响应式布局：针对大屏幕优化 */
        @media (min-width: 1800px) {
            .main-content {
                max-width: 1700px; /* 增加大屏幕下的最大宽度 */
            }
            .content-wrapper {
                display: flex;
                align-items: flex-start;
                gap: 20px;
            }
            .content-wrapper > .card:first-child { /* 分组管理卡片 */
                flex: 1;
                min-width: 380px;
            }
            .content-wrapper > .card:last-child { /* API管理卡片 */
                flex: 2.5;
            }
        }

        /* --- 全新UI美化：青春活力版 --- */

        @keyframes gradient-animation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        html {
            overflow-y: scroll; /* Always show scrollbar to prevent layout shift */
        }

        body {
            background-color: #f0f2f5;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        }
        
        .header {
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradient-animation 15s ease infinite;
            border-bottom: none;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            color: white;
            padding: 20px 30px;
        }

        .header h1 {
            font-size: 24px;
            font-weight: 700;
        }
        
        .header-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .refresh-btn {
            font-size: 22px;
            cursor: pointer;
            transition: transform 0.5s ease;
        }

        .refresh-btn.loading {
            transform: rotate(360deg);
        }

        .api-item:hover, .group-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            border-color: #409eff;
        }

        .card {
            border-radius: 12px;
            border: 1px solid #e9ecef;
            box-shadow: 0 8px 16px rgba(0,0,0,0.05);
        }

        /* 列表项入场动画 */
        .list-enter-active, .list-leave-active {
            transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
        }
        .list-move {
            transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
        }
        .list-enter, .list-leave-to {
            opacity: 0;
            transform: translateY(20px);
        }
        .list-leave-active {
            position: absolute;
        }

        /* 骨架屏加载动画 */
        @keyframes shimmer {
            0% { background-position: -468px 0; }
            100% { background-position: 468px 0; }
        }
        .skeleton-item {
            background: #fff;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            margin-bottom: 10px;
            padding: 15px;
        }
        .skeleton-block {
            background: #f6f7f8;
            background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
            background-repeat: no-repeat;
            background-size: 800px 104px;
            display: inline-block;
            height: 16px;
            border-radius: 4px;
            animation: shimmer 1s linear infinite;
            line-height: 1;
        }
        .skeleton-item .api-header, .skeleton-item .group-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .group-item.selected {
            background-color: #ecf5ff;
            border-left: 3px solid #409eff;
        }
        .card-body.group-card-body {
            /* Removed fixed height and flex properties */
        }

        .group-list-container {
            max-height: 400px; /* Directly set a max-height to enable internal scrolling */
            overflow-y: auto;
            padding: 5px;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        .group-list-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

        .group-header {
            padding: 15px;
            background: #fafafa;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="app" class="app-container" v-cloak>
        <div class="header">
            <h1>YiMo Mock服务管理平台</h1>
            <div class="header-actions">
                <a href="https://github.com/Aiden-run/YiMo" target="_blank" class="github-link">
                    <span class="github-icon"></span>
                    <span id="github-stars">YiMo</span>
                </a>
            </div>
        </div>

        <div class="main-content">
            
            <div class="content-wrapper">
                <!-- 分组管理 -->
                <div class="card">
                    <div class="card-header">
                        <h2>分组管理</h2>
                        <div>
                            <el-button type="primary" @click="showGroupDialog = true" icon="el-icon-plus">新建分组</el-button>
                        </div>
                    </div>
                    <div class="card-body group-card-body">
                        <div v-if="groupListLoading && !groupList.length" class="loading">
                           加载中...
                       </div>
                       <div v-else-if="groupList.length === 0 && !groupListLoading" class="empty-state">
                           <h4>暂无分组</h4>
                           <p>可以点击右上角按钮，立即创建一个！</p>
                       </div>
                       <div v-else>
                           <transition-group :name="isInitialLoad ? '' : 'list'" tag="div" class="group-list-container" ref="groupListContainer">
                               <div v-for="group in groupList" :key="group.apiGroupId" class="group-item" :class="{ 'selected': selectedGroup === group.apiGroupId }" @click="filterByGroup(group)">
                                   <div class="group-info">
                                       <span class="group-name" title="点击筛选API">{{ group.apiGroupName }}</span>
                                       <span class="group-base-url">{{ group.apiBaseUrl }}</span>
                                   </div>
                                   <div class="group-actions">
                                       <el-button type="text" size="mini" @click.stop="editGroup(group)">编辑</el-button>
                                       <el-popconfirm title="确定要删除这个分组吗？" @confirm="deleteGroup(group.apiGroupId)">
                                           <el-button slot="reference" type="text" size="mini" style="color: #F56C6C; margin-left: 10px;" @click.stop>删除</el-button>
                                       </el-popconfirm>
                                   </div>
                               </div>
                               <p v-if="groupListLoading" key="loading" class="loading" style="text-align: center; padding: 10px;">加载中...</p>
                               <p v-if="!groupListLoading && groupList.length >= groupListTotal && groupList.length > 0" key="no-more" style="text-align: center; color: #909399; padding: 10px;">没有更多了</p>
                           </transition-group>
                       </div>
                   </div>
                </div>

                <!-- API管理 -->
                <div class="card">
                     <div class="card-header">
                        <h2>API管理</h2>
                        <div>
                            <el-button @click="handleRefreshClick" :icon="isRefreshing ? 'el-icon-check' : 'el-icon-refresh'" :disabled="isRefreshing">
                                {{ isRefreshing ? '已刷新' : '刷新' }}
                            </el-button>
                            <el-button type="primary" @click="showCreateDialog = true" icon="el-icon-plus">新建API</el-button>
                        </div>
                    </div>
                    <div class="card-body content-area">
                        <!-- 工具栏 -->
                        <div class="toolbar">
                            <div class="search-box">
                                <el-input v-model="searchKeyword" placeholder="搜索API名称" clearable prefix-icon="el-icon-search"></el-input>
                            </div>
                            <div class="filter-group">
                                <el-select v-model="selectedGroup" placeholder="选择分组" clearable>
                                    <el-option
                                        v-for="group in groups"
                                        :key="group.apiGroupId || Math.random()"
                                        :label="group.apiGroupName || ''"
                                        :value="group.apiGroupId">
                                    </el-option>
                                </el-select>
                                <el-select v-model="selectedMethod" placeholder="请求方法" clearable>
                                    <el-option label="GET" value="GET"></el-option>
                                    <el-option label="POST" value="POST"></el-option>
                                    <el-option label="PUT" value="PUT"></el-option>
                                    <el-option label="DELETE" value="DELETE"></el-option>
                                </el-select>
                                <el-select v-model="selectedStatus" placeholder="状态" clearable>
                                    <el-option label="启用" :value="true"></el-option>
                                    <el-option label="禁用" :value="false"></el-option>
                                </el-select>
                            </div>
                        </div>

                        <!-- API列表 -->
                        <div v-if="initialLoading">
                             <div v-for="n in pageSize" :key="n" class="skeleton-item">
                                <div class="api-header">
                                    <div style="display: flex; align-items: center; gap: 10px;">
                                        <span class="skeleton-block" style="width: 60px; height: 24px;"></span>
                                        <span class="skeleton-block" style="width: 300px;"></span>
                                        <span class="skeleton-block" style="width: 150px;"></span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 10px;">
                                        <span class="skeleton-block" style="width: 50px; height: 20px;"></span>
                                        <span class="skeleton-block" style="width: 60px; height: 28px;"></span>
                                        <span class="skeleton-block" style="width: 60px; height: 28px;"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else-if="apis.length === 0" class="empty-state">
                            <h4>暂无API配置</h4>
                            <p>可以点击右上角按钮，立即创建一个！</p>
                        </div>
                        <transition-group v-else :name="isInitialLoad ? '' : 'list'" tag="div">
                            <div v-for="api in apis" :key="api.apiConfigId || Math.random()" class="api-item">
                                <div class="api-header">
                                    <div>
                                        <span :class="['api-method', 'method-' + (api.apiMethod || 'get').toLowerCase()]">{{ api.apiMethod || 'GET' }}</span>
                                        <span class="api-url">{{"/api" + (api.apiBaseUrl || '') + (api.apiUrl || '') }}</span>
                                        <span style="margin-left: 10px; color: #909399;">{{ api.apiConfigName || '' }}</span>
                                        <el-tooltip content="流式API" placement="top">
                                            <i v-if="api.contentType === 'text/event-stream'" class="el-icon-connection" style="margin-left: 8px; color: #828288; outline: null"></i>
                                        </el-tooltip>
                                    </div>
                                    <div class="api-status">
                                        <span :class="['status-badge', (api.enabled ? 'status-active' : 'status-inactive')]">{{ api.enabled ? '启用' : '禁用' }}</span>
                                        <el-button size="mini" type="text" @click="requestApi(api)" icon="el-icon-s-promotion">请求</el-button>
                                        <el-button size="mini" @click="editApi(api)" icon="el-icon-edit">编辑</el-button>
                                        <el-button size="mini" type="danger" @click="deleteApi(api.apiConfigId || 0)" icon="el-icon-delete">删除</el-button>
                                    </div>
                                </div>
                            </div>
                        </transition-group>

                        <!-- 分页 -->
                        <div v-if="total > 0" class="pagination-container">
                            <el-pagination
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-size="pageSize"
                                layout="total, prev, pager, next"
                                :total="total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 创建/编辑API对话框 -->
        <el-dialog :title="editingApi ? '编辑API' : '新建API'" :visible.sync="showCreateDialog" width="50%" class="api-form-dialog">
            <el-form :model="apiForm" :rules="apiRules" ref="apiForm" label-width="80px">
                <el-row :gutter="16">
                    <el-col :span="12">
                        <el-form-item label="API名称" prop="apiConfigName">
                            <el-input v-model="apiForm.apiConfigName" placeholder="请输入API名称" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属分组" prop="apiGroupId">
                            <el-select v-model="apiForm.apiGroupId" placeholder="选择分组" style="width: 100%;" size="small">
                                <el-option
                                    v-for="group in groups"
                                    :key="group.apiGroupId || Math.random()"
                                    :label="group.apiGroupName || ''"
                                    :value="group.apiGroupId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="16">
                    <el-col :span="12">
                        <el-form-item label="请求方法" prop="apiMethod">
                            <el-select v-model="apiForm.apiMethod" style="width: 100%;" size="small">
                                <el-option label="GET" value="GET"></el-option>
                                <el-option label="POST" value="POST"></el-option>
                                <el-option label="PUT" value="PUT"></el-option>
                                <el-option label="DELETE" value="DELETE"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="API路径" prop="apiUrl">
                            <el-input v-model="apiForm.apiUrl" placeholder="/api/path" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="16">
                    <el-col :span="12">
                        <el-form-item label="状态码" prop="statusCode">
                            <el-input-number v-model="apiForm.statusCode" :min="100" :max="599" style="width: 120px;" size="small"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="延迟(ms)" prop="delay">
                            <el-input-number v-model="apiForm.delay" :min="0" :max="10000" style="width: 120px;" size="small"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="响应内容" prop="response">
                    <el-input
                        type="textarea"
                        v-model="apiForm.response"
                        :rows="6"
                        :placeholder="getResponsePlaceholder()">
                    </el-input>
                    <div class="template-example">
                        <el-button type="text" size="mini" @click="showTemplateHelp">查看可用变量</el-button>
                             模板示例：<code>{"name": "${name}"}</code>
                    </div>
                </el-form-item>

                <el-form-item label="描述">
                    <el-input v-model="apiForm.comment" placeholder="API描述（可选）" size="small"></el-input>
                </el-form-item>
                
                <el-row :gutter="16">
                    <el-col :span="12">
                        <el-form-item label="模板变量">
                            <el-switch v-model="apiForm.template"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="流式返回">
                            <el-switch 
                                v-model="apiForm.streamEnabled"
                                @change="onStreamEnabledChange">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="启用状态">
                    <el-switch v-model="apiForm.enabled"></el-switch>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="showCreateDialog = false">取消</el-button>
                <el-button type="primary" @click="saveApi">确定</el-button>
            </div>
        </el-dialog>

        <!-- 模板变量说明对话框 -->
        <el-dialog title="可用模板变量" :visible.sync="showTemplateHelpDialog" width="60%">
            <el-table :data="templateConstants" style="width: 100%" v-loading="templateLoading">
                <el-table-column prop="code" label="变量名"></el-table-column>
                <el-table-column prop="desc" label="说明"></el-table-column>
            </el-table>
            <div slot="footer">
                <el-button @click="showTemplateHelpDialog = false">关闭</el-button>
            </div>
        </el-dialog>

        <!-- 创建分组对话框 -->
        <el-dialog :title="editingGroup ? '编辑分组' : '新建分组'" :visible.sync="showGroupDialog" width="40%" class="api-form-dialog">
            <el-form :model="groupForm" :rules="groupRules" ref="groupForm" label-width="100px">
                <el-form-item label="分组名称" prop="apiGroupName">
                    <el-input v-model="groupForm.apiGroupName" placeholder="请输入分组名称"></el-input>
                </el-form-item>
                <el-form-item label="基础URL" prop="apiBaseUrl">
                    <el-input v-model="groupForm.apiBaseUrl" placeholder="/api"></el-input>
                    <!-- Delete Popover Confirmation -->
                    <div v-if="editingGroup" style="margin-top: 10px; text-align: right;">
                        <el-popover
                            placement="top"
                            width="220"
                            v-model="deletePopoverVisible">
                            <p>删除分组后会清空分组下的所有API。 <br/>您确认要继续吗?</p>
                            <div style="text-align: right; margin: 10px 0 0 0">
                                <el-button size="mini" type="text" @click="deletePopoverVisible = false">取消</el-button>
                                <el-button type="primary" size="mini" @click="deleteGroup(editingGroup.apiGroupId)">确定</el-button>
                            </div>
                            <a href="#" slot="reference" style="color: #f56c6c; text-decoration: none; font-size: 12px;" @click.prevent>
                               您真的要删除吗?  <u>删除分组</u>
                            </a>
                        </el-popover>
                    </div>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="showGroupDialog = false">取消</el-button>
                <el-button type="primary" @click="saveGroup">确定</el-button>
            </div>
        </el-dialog>

        <!-- 响应弹框 -->
        <el-dialog title="API响应结果" :visible.sync="showResponseDialog" width="70%" class="response-dialog">
            <div v-if="currentResponse">
                <div class="response-info">
                    <h4>请求信息</h4>
                    <p><strong>请求方法：</strong>{{ currentResponse.method }}</p>
                    <p><strong>请求URL：</strong>{{ currentResponse.url }}
                      <el-button
                        size="mini"
                        type="text"
                        style="margin-left: 8px;"
                        @click="copyFullUrl"
                      >复制路径</el-button>
                    </p>
                    <p><strong>状态码：</strong>{{ currentResponse.status }}</p>
                    <p><strong>响应时间：</strong>{{ currentResponse.responseTime }}ms</p>
                    <p><strong>响应类型：</strong>{{ currentResponse.contentType || 'application/json' }}</p>
                    <p v-if="currentResponse.isStreaming" style="color: #409eff;">
                        <i class="el-icon-loading"></i> 流式数据接收中...
                    </p>
                    <p v-else-if="currentResponse.contentType && (currentResponse.contentType.includes('stream') || currentResponse.contentType === 'text/event-stream')" style="color: #67c23a;">
                        <i class="el-icon-check"></i> 流式数据接收完成
                    </p>
                </div>

                <div class="response-content">
                    <h4>响应内容</h4>
                    <pre v-if="currentResponse.isStreaming || (currentResponse.contentType === 'text/event-stream')">{{ currentResponse.data }}{{ currentResponse.isStreaming ? '\n\n⏳ 数据流式传输中...' : '' }}</pre>
                    <pre v-else><code class="language-json" v-html="formattedResponse"></code></pre>
                </div>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="showResponseDialog = false">关闭</el-button>
                <el-button type="primary" @click="copyResponse">复制响应</el-button>
            </div>
        </el-dialog>
    </div>

    <script src="lib/vue.js"></script>
    <script src="lib/element-ui.js"></script>
    <script src="lib/axios.min.js"></script>
    <script src="lib/highlight.min.js"></script>
    <script src="js/config.js"></script>
    <script src="js/app.js"></script>
</body>
</html> 